<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="../../../build/Cesium/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../../../build/CEarth/CEarth.css" />
		<link rel="stylesheet" href="../assets/css/CEarth-Example.css" type="text/css" />
		<style>
			#CEarthContainer{
				background: url(../assets/img/bac1.png);
				background-size: cover;
				-webkit-background-size: cover;
				-o-background-size: cover;
				background-position: center 0;
			}
		</style>
	</head>
	<body>
		<div id="CEarthContainer" class="CEarth-container"></div>

		<script src="../../../build/Cesium/Cesium.js"></script>
		<script src="../../../build/CEarth/CEarth.js"></script>
		<script>
			//创建三维地球场景  
			var viewer = new CEarth.App('CEarthContainer', {
				scene: {
					center: {
						x: 103.364905,
						y: 23.396201,
						z: 100000,
						heading: 0,
						pitch: -90
					},
					showSun: false,
					showMoon: false,
					showSkyBox: false,
					showSkyAtmosphere: false,
					fog: true,
					fxaa: true,
					globe: {
						show: false,
						showGroundAtmosphere: false,
						depthTestAgainstTerrain: false,
						baseColor: '#546a53',
					},
					cameraController: {
						zoomFactor: 3.0,
						minimumZoomDistance: 1,
						maximumZoomDistance: 50000000,
						enableRotate: true,
						enableZoom: true,
					},
				},
				control: {
					geocoder:false,
					baseLayerPicker: false, //basemaps底图切换按钮
					homeButton: false, //视角复位按钮
					sceneModePicker: false, //二三维切换按钮
					navigationInstructionsInitiallyVisible: false, //默认不显示帮助信息
					navigationHelpButton: false, //帮助按钮
					fullscreenButton: false, //全屏按钮
					timeline: false, //时间轴
					animation: false, //动画部件
				}
			});

			var options = {
			        camera : viewer.scene.camera,
			        canvas : viewer.scene.canvas,
			        clampToGround: false //开启贴地
			    };
				
				
				viewer.dataSources.add(Cesium.KmlDataSource.load('../json/1.kml', options)).then(function(dataSource){
					var entities = dataSource.entities.values;
					for(var entity of entities){
						if(entity.label){
							entity.label.show=false;
							entity.billboard.show=false;
						}
						if(entity.polygon){
							entity.polygon.material= Cesium.Color.fromCssColorString("rgb(9,39,76,0.7)");
							entity.polygon.extrudedHeight= 0;
							entity.polygon.closeTop=false;
							entity.polygon.closeBottom=true;
							entity.polygon.outline= false;
							entity.polygon.fill= true;
							entity.polygon.show= true;
							if(entity.name=='蒙自市' || entity.name.indexOf("社区") != -1  ){
								entity.polygon.show=false;
							}
						}
					}
				});
				
			    viewer.dataSources.add(Cesium.KmlDataSource.load('../json/2.kml', options)).then(function(dataSource){
					var entities = dataSource.entities.values;
					for(var entity of entities){
						if(entity.label){
							entity.label.show=false;
							entity.billboard.show=false;
						}
						if(entity.polygon){
							entity.polygon.material= Cesium.Color.fromCssColorString("rgba(80,197,255,.6)");
							entity.polygon.height= 1000.0;
							entity.polygon.extrudedHeight= 1;
							entity.polygon.closeTop=true;
							entity.polygon.closeBottom=true;
							entity.polygon.outline=false;
							entity.polygon.outlineWidth=2;
							entity.polygon.show= true
							entity.polygon.fill= true
							entity.polygon.outlineColor=Cesium.Color.fromCssColorString("rgb(51,250,255)");
							if(entity.name=='蒙自市' || entity.name.indexOf("社区") != -1  ){
								entity.polygon.show=false;
							}else{
								entity.polyline = {
									positions: addPositionsHeight(entity.polygon.hierarchy._value.positions, 1000),
									width: entity.polygon.outlineWidth,
									material: Cesium.Color.fromCssColorString("rgb(51,250,255)")
								}
							}
						}
					}
			    });
				

				
				viewer.scene.backgroundColor=new Cesium.Color(0,0,0,0);
				// 如果为真，则允许用户旋转相机。如果为假，相机将锁定到当前标题。此标志仅适用于2D和3D。
				viewer.scene.screenSpaceCameraController.enableRotate = true;
				// 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
				viewer.scene.screenSpaceCameraController.enableTranslate = false;
				// 如果为真，允许用户放大和缩小。如果为假，相机将锁定到距离椭圆体的当前距离
				viewer.scene.screenSpaceCameraController.enableZoom = true;
				// 如果为真，则允许用户倾斜相机。如果为假，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
				viewer.scene.screenSpaceCameraController.enableTilt = true;
				let height=1000;
			    var lastEntity = null;
				viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
					var pickedFeature = viewer.scene.pick(movement.position);
					if(Cesium.defined(pickedFeature) && Cesium.defined(pickedFeature.id)){
						if(Cesium.defined(lastEntity) && Cesium.defined( lastEntity.id) && Cesium.defined( pickedFeature.id.id) && lastEntity.id==pickedFeature.id.id){
							return;
						}
						if(Cesium.defined(lastEntity)){
							viewer.entities.remove(lastEntity);
							lastEntity=null;
							height=1000;
						}
						
						lastEntity =viewer.entities.add({
						  id:"1",	
						  polygon: {
						    hierarchy:pickedFeature.id.polygon.hierarchy,
						    material:Cesium.Color.fromCssColorString("rgba(255, 170, 0, 1.0)"),
							extrudedHeight:1000.0,
							height:new Cesium.CallbackProperty(function() {
								if(height<5000){
									height+=200;
								}
								return height;
							}, false)
						  }
						});
					}else if(Cesium.defined(lastEntity)){
						if(Cesium.defined(lastEntity)){
							viewer.entities.remove(lastEntity);
							lastEntity=null;
							height=1000;
						}
					}
				}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
			
			
			/**
			 * 在坐标基础海拔上增加指定的海拔高度值
			 * @param {Array} positions Cartesian3类型的数组
			 * @param {Number} height 高度值
			 * @return {Array} Cartesian3类型的数组
			 */
			function addPositionsHeight(positions, addHeight) {
			    addHeight = Number(addHeight) || 0;
			    if (isNaN(addHeight) || addHeight == 0) return positions;
			    if (positions instanceof Array) {
			        var arr = [];
			        for (var i = 0, len = positions.length; i < len; i++) {
			            var car = Cesium.Cartographic.fromCartesian(positions[i]);
			            var point = Cesium.Cartesian3.fromRadians(car.longitude, car.latitude, car.height + addHeight);
			            arr.push(point);
			        }
			        return arr;
			    } else {
			        var car = Cesium.Cartographic.fromCartesian(positions);
			        return Cesium.Cartesian3.fromRadians(car.longitude, car.latitude, car.height + addHeight);
			    }
			}
			
			
		</script>
	</body>
</html>
